<template>
  <div class="common-intro">
    <div class="discreaption">
      <p class="distit">任务描述</p>
      <textarea type="textarea" class="disbox" placeholder="请输入任务详情" />
    </div>
    <div class="discreaption">
      <p class="distit">任务完成标准</p>
      <textarea type="textarea" class="disbox" placeholder="请输入完成标准" />
    </div>
    <div class="discreaption">
      <p class="distit">任务执行步骤</p>
      <textarea type="textarea" class="disbox" placeholder="请输入执行步骤" />
    </div>
    <div class="discreaption">
      <p class="distit">任务附件</p>
      <!-- <div class="plus" @click="fileUpload">+</div> -->
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :show-file-list="false"
        multiple
        :limit="4"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <div type="primary" class="plus">+</div>
      </el-upload>
      <div class="filelist">
        <div v-for="item in fileList" :key="item.id" class="file">
          <img src="@/assets/wenjianleixing-fujian-2.png" alt="" />
          <div class="fileinfo">
            <p class="filetit">{{ item.filetit }}</p>
            <div class="downbtn">
              <img
                style="margin-left: 20px"
                src="@/assets/download.png"
                alt=""
              />
              <img src="@/assets/delete.png" @click="beforeRemove" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'common-intro',
  data() {
    return {
      content: {
        file: [
          {
            id: 0,
            filetit: '附件名称附件名称111'
          },
          {
            id: 1,
            filetit: '附件名称附件名称2222222222222222222222222222222222222'
          },
          {
            id: 2,
            filetit: '附件名称附件名称'
          },
          {
            id: 3,
            filetit: '附件名称附件名称'
          },
          {
            id: 4,
            filetit: '附件名称附件名称'
          }
        ]
      },
      fileList: [
        {
          id: 0,
          filetit: '附件名称附件名称111'
        },
        {
          id: 1,
          filetit: '附件名称附件名称2222222222222222222222222222222222222'
        },
        {
          id: 2,
          filetit: '附件名称附件名称'
        },
        {
          id: 3,
          filetit: '附件名称附件名称'
        },
        {
          id: 4,
          filetit: '附件名称附件名称'
        }
      ]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message({
        showClose: true,
        message: `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
        type: 'warning'
      });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style lang="less" scoped>
.common-intro {
  margin-top: -1px;
  width: 98%;
  text-align: center;
  margin-top: 32px;
  background: white;
  .tit {
    font-size: 16px;
    font-weight: 400;
    color: #111;
  }
  .discreaption {
    text-align: left;
    position: relative;
    margin-bottom: 32px;
    .distit {
      font-size: 16px;
    }
    .disbox {
      width: 98%;
      height: 168px;
      padding: 30px;
      font-size: 14px;
      color: #555;
      font-weight: 400;
      border: 1px solid #f1f4ff;
      outline: none;
    }
    .disbox:focus {
      box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
        inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
    }
    .plus {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
      font-size: 24px;
      color: #fff;
      cursor: pointer;
      position: absolute;
      left: 5%;
      top: 0;
    }
    .filelist {
      display: flex;
      .file {
        display: flex;
        width: 315px;
        margin-right: 60px;
        height: 64px;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 1px 1px 3px 0px rgba(153, 153, 153, 0.5);
        border-radius: 8px;
        img {
          width: 48px;
          height: 48px;
          margin: 8px;
        }
        .fileinfo {
          display: flex;
          p {
            width: 100px;
            font-size: 16px;
            color: #111;
            margin: 10px;
            overflow: hidden;
          }
          .downbtn {
            display: flex;
            img {
              width: 31px;
              height: 31px;
              border-radius: 50%;
              margin: 17px 10px;
            }
          }
        }
      }
    }
  }
}
</style>
